<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" errorPage="/commons/errorpage/500.jsp"%>
<%@ include file="/commons/comm_const_tag.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>提示框 - ${appTitle}</title>
<%@ include file="/commons/comm_css_js.jsp"%>
<script type="text/javascript" src="${syntax}"></script>
<link rel="stylesheet" type="text/css" href="${contextPath}/jqueryanze/css/jqueryanze.css?_v=${rsVer}" />
<link rel="stylesheet" type="text/css" href="${contextPath}/jqueryanze/css/alert.css?_v=${rsVer}" />
<script type="text/javascript" src="${contextPath}/jqueryanze/js/jqueryanze.js?_v=${rsVer}"></script>
<script type="text/javascript" src="${contextPath}/jqueryanze/js/alert.js?_v=${rsVer}"></script>
</head>

<body>
<%-- 	<%@ include file="/commons/comm_page_header.jsp"%> --%>
   	<div id="tabs">
		<ul>
			<li><a href="#show">描述</a></li>
			<li><a href="#demo">演示</a></li>
		</ul>
		<div id="show">
			<h2>提示信息</h2>
			<p>在我们开发当中，常常会用到弹出提示信息的对话框，一般我们会使用浏览器自带的 alert() 和 confirm() 方法。
			<br>但我们为了更的用户体验，使用 jQuery.anze.alert() 方法。这个方法是一个综合的方法（与浏览器的 alert() 方法不一样），有很多参数可以自定义。</p>
			<p>同时我们也提示了简单常用的方法，包括：info() 方法，warn() 方法，error() 方法，confirm() 方法。</p>
			<p>提示信息使用了 jquery.anze.css 样式，主要定义了各提示信息的图片，可覆盖此样式来统一更换图片。</p>
			<div class="ui-widget ui-widget-content ui-corner-all method">
				<p class="ui-widget-header method-header">alert( options )</p>
				<ul>
					<li>
						<span class="param-header">options</span>
						<span class="param-type">PlainObject</span>
						<ul>
							<li>
								<span class="param-header">type</span>
								<span class="param-type">String</span>
								<span class="param-default">"alert"</span>
								<br>提示信息类型，可选值：
								<ul>
									<li>
										<span class="param-header">alert</span>
										<br>只生成一个确认按钮，回调 onConfirm() 方法
									</li>
									<li>
										<span class="param-header">confirm</span>
										<br>生成确认和取消按钮，分别回调 onConfirm() 和 onCancel() 方法</li>
								</ul>
							</li>
							<li>
								<span class="param-header">title</span>
								<span class="param-type">String</span>
								<span class="param-default">"提示"</span>
								<br>提示信息标题</li>
							<li>
								<span class="param-header">imgClass</span>
								<span class="param-type">String</span>
								<span class="param-default">""</span>
								<br>提示图片的 css 样式名字</li>
							<li>
								<span class="param-header">message</span>
								<span class="param-type">String</span>
								<span class="param-default">""</span>
								<br>提示信息内容</li>
							<li>
								<span class="param-header">width</span>
								<span class="param-type">Number</span>
								<span class="param-default">350</span>
								<br>提示信息内容</li>
							<li>
								<span class="param-header">height</span>
								<span class="param-type">String</span>
								<span class="param-type">Number</span>
								<span class="param-default">"auto"</span>
								<br>提示框高度</li>
							<li>
								<span class="param-header">zIndex</span>
								<span class="param-type">Number</span>
								<span class="param-default">201</span>
								<br>提示框的 index 值</li>
							<li>
								<span class="param-header">onConfirm</span>
								<span class="param-type">Function</span>
								<br>点“确认”按钮的回调函数，默认关闭提示框，“confirm”类型下，会先关闭提示框，再回调</li>
							<li>
								<span class="param-header">onCancel</span>
								<span class="param-type">Function</span>
								<br>点“取消”按钮的回调函数，默认关闭提示框</li>
						</ul>
					</li>
				</ul>
				<p class="ui-widget-header method-header">info( message )</p>
				<ul>
					<li>
						<span class="param-header">message</span>
						<span class="param-type">String</span>
						<span class="param-default">""</span>
						<br>提示信息内容
					</li>
				</ul>
				<p class="ui-widget-header method-header">warn( message )</p>
				<ul>
					<li>
						<span class="param-header">message</span>
						<span class="param-type">String</span>
						<span class="param-default">""</span>
						<br>提示信息内容
					</li>
				</ul>
				<p class="ui-widget-header method-header">error( message )</p>
				<ul>
					<li>
						<span class="param-header">message</span>
						<span class="param-type">String</span>
						<span class="param-default">""</span>
						<br>提示信息内容
					</li>
				</ul>
				<p class="ui-widget-header method-header">confirm( title, message, onConfirm[, data] )</p>
				<ul>
					<li>
						<span class="param-header">title</span>
						<span class="param-type">String</span>
						<span class="param-default">"提示"</span>
						<br>提示信息标题
					</li>
					<li>
						<span class="param-header">message</span>
						<span class="param-type">String</span>
						<span class="param-default">""</span>
						<br>提示信息内容
					</li>
					<li>
						<span class="param-header">onConfirm</span>
						<span class="param-type">Function</span>
						<br>点"确认"按钮的回调函数
					</li>
					<li>
						<span class="param-header">data</span>
						<span class="param-type">AnyType</span>
						<span class="param-default">null</span>
						<br>回调函数使用的参数
					</li>
				</ul>
			</div>
		</div>
		<div id="demo">
		  	<div>
			  	<h2>普通信息</h2>
				<input type="button" id="btn1" value="普通信息" />
				<pre class="syntax xml">	&lt;input type="button" id="btn1" value="普通信息" /&gt;</pre>
				<pre class="syntax javascript">	//普通信息提示
	$("#btn1").button().click(function() {
		$.anze.info("这是一个普通信息提示！");
	});</pre>
			  	<h2>警告信息</h2>
			    <input type="button" id="btn2" value="警告信息" />
				<pre class="syntax xml">	&lt;input type="button" id="btn2" value="警告信息" /&gt;</pre>
			    <pre class="syntax javascript">	//警告信息提示
	$("#btn2").button().click(function() {
		$.anze.warn("这是一个警告信息提示！");
	});</pre>
			  	<h2>错误信息</h2>
			    <input type="button" id="btn3" value="错误信息" />
				<pre class="syntax xml">	&lt;input type="button" id="btn3" value="错误信息" /&gt;</pre>
			    <pre class="syntax javascript">	//错误信息提示
	$("#btn3").button().click(function() {
		$.anze.error("这是一个错误信息提示！");
	});</pre>
			  	<h2>确认框</h2>
			  	<p>先调用confirm(message)方法，单击"确认"后调用info(message)方法</p>
			    <input type="button" id="btn4" value="确认框" />
				<pre class="syntax xml">	&lt;input type="button" id="btn4" value="确认框" /&gt;</pre>
			    <pre class="syntax javascript">	//确认对话框
	$("#btn4").button().click(function() {
		$.anze.confirm("确认删除", "确认要删除吗？", function () {
			$.anze.info("删除成功！");
		});
	});</pre>
			  	<h2>自定义信息</h2>
			  	<p>调用alert(options)方法，第一个自定义了宽度高度，第二自定义了标题和确认回调函数，第三个自定义了图片和取消回调函数</p>
			    <input type="button" id="btn5" value="自定义宽和高" />
				<pre class="syntax xml">	&lt;input type="button" id="btn5" value="自定义宽和高" /&gt;</pre>
			    <pre class="syntax javascript">	//自定义宽和高
	$("#btn5").button().click(function() {
		var options = {
			width : 500,
			height : 400,
			message : "我自定义了宽和高！"
		}
		$.anze.alert(options);
	});</pre><br>
			    <input type="button" id="btn6" value="自定义标题和确认回调" />
				<pre class="syntax xml">	&lt;input type="button" id="btn6" value="自定义标题和确认回调" /&gt;</pre>
			    <pre class="syntax javascript">	//自定义带标题和确认回调函数
	$("#btn6").button().click(function() {
		var options = {
				title : "呵呵@_@",
				message : "我自定义了标题和确认回调函数，点确认试试！",
				onConfirm : function () {
					alert("你关不掉我");
				}
			}
			$.anze.alert(options);
	});</pre><br>
			    <input type="button" id="btn7" value="自定义图片和取消回调" />
				<pre class="syntax xml">	&lt;input type="button" id="btn7" value="自定义图片和取消回调" /&gt;</pre>
			    <pre class="syntax javascript">	//自定义图片和取消回调
	$("#btn7").button().click(function() {
		var options = {
				type : "confirm",
				imgClass : "img",
				message : "我自定义了图片和取消回调函数，点取消试试！",
				onCancel : function () {
					alert("你关不掉我");
				}
			}
			$.anze.alert(options);
	});</pre><br>
		    	<div class="ui-state-highlight ui-corner-all">
		    		<span class="ui-icon ui-icon-info"></span><strong>注意：</strong>
			    	<ul>
			    		<li>尽量不要使用自定义提示，以免风格不统一</li>
			    		<li>如果要统一更换图片，请定义 css 样式覆盖默认样式来统一更换图片</li>
			    	</ul></div>
			</div>
		</div>
	</div>

<%-- 	<%@ include file="/commons/comm_page_footer.jsp"%> --%>
</body>
</html>